<template>
	<view class="city-picker" v-if="!hidden">
		<view class="card-header">
			<text class="address-item" v-if="province.areaName" @click="province=city=district={},getProvince()">{{province.areaName}}</text>
			<text class="address-item" v-if="city.areaName">{{city.areaName}}</text>
			<text class="address-item" v-if="district.areaName">{{district.areaName}}</text>
			<text class="title">{{pickerTitle}}</text>
			<i class="icon i-close" @click="$emit('update:hidden', true)"></i>
		</view>
		<view class="card-body">
			<view class="item" v-for="(item, index) in cities" :key="index" @click="change(item)">{{item.areaName}}</view>
		</view>
	</view>
</template>

<script>
	import cities from '@/common/config/user/cities.config.js';

	export default {
		props: {
			hidden: {
				type: Boolean,
				default: true
			},
			deep: {
				type: Number,
				default: 3,
				validator: (value) => {
					return value >= 1 && value <= 3;
				}
			}
		},
		data() {
			return {
				province: {
					name: '',
					index: -1
				},
				city: {
					name: '',
					index: -1
				},
				district: {
					name: '',
					index: -1
				},
				cities:[],
				provinceCode:'',
				cityCode:'',
				districtCode:'',
				
			}
		},
		watch: {
			hidden(e) {
				this.province = {};
				this.city = {};
				this.district = {};
				this.getProvince()
			}
		},
		computed: {
			pickerTitle() {
				let title = '';
				if (!this.province.areaName) title = '选择省份/自治区';
				else if (!this.city.areaName) title = '选择城市/地区';
				else if (!this.district.areaName) title = '选择区县';
				return title;
			},
			// cities() {
			// 	let cityArray = [];
			// 	if (!this.province.name) cityArray = cities;
			// 	else if (!this.city.name) cityArray = cities[this.province.index].city;
			// 	else if (!this.district.name) cityArray = cities[this.province.index].city[this.city.index].area;
			// 	return cityArray;
			// }
		},
		created() {
			this.getProvince()
		},
		methods: {
			//获取国内省份
			getProvince() {
				this.uni_request({
					url: '/area/province',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 200) {
							this.cities = res.data.data;
							
						}
					}
				})
			},
			
			change(item) {
				let returnAddress = false;
				const address = item;
				if (!this.province.areaName) {
					this.uni_request({
						url: '/area/city',
						method: 'get',
						data:{parentId:item.areaId},
						success: (res) => {
							if (res.data.code == 200) {
								this.cities= res.data.data;
								this.provinceCode = item.areaId;
								if (this.deep == 1) returnAddress = true;
								this.province = address;
							} 
						}
					})
				} else if (!this.city.areaName && this.deep >= 2) {
					
					this.uni_request({
						url: '/area/district',
						method: 'get',
						data:{parentId:item.areaId},
						success: (res) => {
							if (res.data.code == 200) {
								this.cities= res.data.data;
								this.cityCode = item.areaId;
								if (this.deep == 2) returnAddress = true;
								this.city = address;
							} 
						}
					})
				} else if (!this.district.areaName && this.deep == 3) {
					var code = item.code
					this.district = address;
					this.districtCode = item.id
					returnAddress = true;
				}
				// 返回值
				if (returnAddress) {
					const {
						province,
						city,
						district
					} = this;
					this.$emit('change', {
						province: province.areaName,
						city: city.areaName,
						district: district.areaName,
						provinceCode:this.provinceCode,
						cityCode:this.cityCode,
						districtCode:this.districtCode,
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.city-picker {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: $bg-color;
		padding: 15px 20px;
		border-radius: 4px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

		.card-header {
			position: relative;
			padding: 6px 0;
			line-height: 30px;
			border-bottom: 1px solid #e0e0e0;

			.address-item {
				color: $color-primary;
				margin-right: 5px;
				cursor: pointer;
			}

			.title {
				color: #757575;
			}

			.i-close {
				position: absolute;
				right: 0;
				top: 0;
				cursor: pointer;
				font-size: 10px;
				font-weight: bold;
				color: #B0B0B0;
			}
		}

		.card-body {
			max-height: 100%;
			overflow-y: auto;
			display: flex;
			flex-wrap: wrap;
			padding-top: 20px;
			background-color: $bg-color;

			.item {
				margin-right: 14px;
				line-height: 30px;
				margin-bottom: 6px;
				color: $text-color;
				cursor: pointer;

				&:hover {
					color: $color-primary;
				}
			}
		}
	}
</style>
